<template>
  <!-- 首页滑动区域 -->
  <div
    class="scroll-wrapper"
    ref="wrapper"
  >
    <div class="scroll-conetent">
      <category-icons></category-icons>
      <!-- 分类ico-end -->
      <div v-if="!errorShow">
        <home-title :title="homeTitle.viewTitle"></home-title>
        <view-list :viewDatas="homeDatas.viewDatas"></view-list>
        <!-- 推荐景点-end -->
        <home-title :title="homeTitle.foodTitle"></home-title>
        <food-list :foodDatas="homeDatas.foodDatas"></food-list>
        <!-- 推荐美食-end -->
        <home-title :title="homeTitle.hotelTitle"></home-title>
        <hotel-list :hotelDatas="homeDatas.hotelDatas"></hotel-list>
        <!-- 推荐酒店-end -->
        <home-title :title="homeTitle.massageTitle"></home-title>
        <massage-list :massageDatas="homeDatas.massageDatas"></massage-list>
        <!-- 推荐按摩-end -->
        <home-title :title="homeTitle.ktvTitle"></home-title>
        <ktv-list :ktvDatas="homeDatas.ktvDatas"></ktv-list>
        <!-- 推荐ktv-end -->
      </div>
      <error :errorShow="errorShow"></error>
    </div>
  </div>
</template>
              
<script>
import BetterScroll from "better-scroll";
import CategoryIcons from "./CategoryIcons/Index";
import HomeTitle from "./Sub/HomeTitle";
import ViewList from "./ViewList/Index";
import FoodList from "./FoodList/Index";
import HotelList from "./HotelList/Index";
import MassageList from "./MassageList/Index";
import KtvList from "./KtvList/Index";
import Error from "./Sub/Error";

import { mapState } from "vuex";
import { IndexModel } from "@/models/index";

import tools from "@/utils/tools";

export default {
  name: "HomeScrollWrapper",
  components: {
    CategoryIcons,
    HomeTitle,
    ViewList,
    FoodList,
    HotelList,
    MassageList,
    KtvList,
    Error
  },
  data() {
    return {
      currentCityId: 0, //用来判断当前组件是否改变的标识
      errorShow: false,
      homeTitle: {
        foodTitle: "推荐美食",
        hotelTitle: "推荐酒店",
        ktvTitle: "推荐ktv",
        massageTitle: "推荐按摩",
        viewTitle: "推荐景点"
      },
      homeDatas: {
        foodDatas: [],
        hotelDatas: [],
        ktvDatas: [],
        massageDatas: [],
        viewDatas: []
      }
    };
  },
  computed: {
    ...mapState(["cityId"])
  },
  methods: {
    getHomeDatas(cityId) {
      const indexModel = new IndexModel();
      indexModel.getHomeDatas(cityId).then(res => {
        if (res && res.status === 0) {
          const data = res.data;
          this.errorShow = false;
          this.homeDatas.viewDatas = data.viewDatas;
          this.homeDatas.foodDatas = tools.formatJSON(
            data.foodDatas,
            "keyword"
          );
          this.homeDatas.hotelDatas = data.hotelDatas;
          this.homeDatas.massageDatas = data.massageDatas;
          this.homeDatas.ktvDatas = data.ktvDatas;
        } else {
          this.errorShow = true;
          console.log({
            statusCode: res.status,
            errorMsg: res.error
          });
        }
      });
    }
  },

  activated() {
    //修改用keep-alive缓存的组件里的数据
    if (this.currentCityId !== this.cityId) {
      this.currentCityId = this.cityId;
      this.getHomeDatas(this.currentCityId);
    }
  },

  mounted() {
    this.scroll = new BetterScroll(this.$refs.wrapper, {
      mouseWheel: true,
      click: true,
      tap: true
    });
    this.currentCityId = this.cityId;
    this.getHomeDatas(this.currentCityId);
  }
};
</script>
              
<style lang="scss" scoped>
</style>